<!-- 温州二中 衢州二中 沈文轩等人版权所有 -->
<!--suppress HtmlDeprecatedAttribute -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{{url_for('static',filename='css/bootstrap.min.css')}}" rel="stylesheet">
  <link href="{{url_for('static',filename='css/docs.css')}}" rel="stylesheet">
  <link href="{{url_for('static',filename='sweetalert2.min.css')}}" rel="stylesheet">

  <script src="{{url_for('static',filename='js/bootstrap.bundle.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/crypto-js.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/jquery-1.12.4.min.js')}}"></script>
  <script src="{{url_for('static',filename='sweetalert2.all.min.js')}}"></script>
  <title>缘茶智学管理端-登录窗口</title>


</head>
<link rel="icon" href="{{url_for('static',filename='images/ico/favicon2.ico')}}">


<body>



  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-lg-4">

        <img src="{{url_for('static',filename='images/CONTENT.jpg')}}" style="max-width: 100%; max-height: 100%;" alt="">

      </div>

      <div class="col-sm-12 col-lg-8">
          <br>
          <h2 align="center">
            请登录
          </h2><br>
        <form id="LoginForm">
          <input type="hidden" name="_csrf_token" value="" id="csrf-token">
          <!--用户名密码输入-->
          <br><br><br><br>
          <div class="form-floating mb-3">
              <label for="Username"></label><input value="admin" disabled type="text" class="form-control" id="Username" placeholder="Username" required>
            <label for="floatingInput">用户名</label>
          </div>
          <div class="form-floating">
              <label for="Password"></label><input type="password" class="form-control" id="Password" placeholder="Password">
            <label for="floatingPassword">密码</label>
          </div>
          <br>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="is_save" value="true">
                <label class="form-check-label" for="is_save">记住密码</label>
            </div>
          <div align="center">
            <button type="button" class="btn btn-primary" onclick="LoginCheck()">登录</button>
          </div>
        </form>

      </div>
    </div>
  </div>

</body>





<!--suppress JSUnresolvedReference -->
<script>
  function LoginCheck() {

      const Username = document.getElementById("Username");
      const Username2 = Username.value;
      const Password = document.getElementById("Password");
      const Password2 = Password.value;
      const _isSave = document.getElementById("is_save");
      const isSave = _isSave.checked
      console.log(isSave)
      const encryptedPassword = CryptoJS.MD5(Password2).toString();
      new Date().getTime();
      const requestbody = {
          username: Username2,
          password: encryptedPassword,
          isSave: isSave

      };
      const xhr = new XMLHttpRequest();
      const url = "/login";
      xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(requestbody));
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            const message = response['message'];
            const condition = response['status'];
            bootstrap_alert(message, condition);

          if (condition !== "success") {
            Password.value = '';
          } else{
              {#window.location.href= 'system';#}
          }
        }
      }
    }
    //提示框
    function bootstrap_alert(msg, cdt) {
        let modalHTML = `
      <!--suppress HtmlDeprecatedAttribute -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">提示</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" align="center"><h3>${msg}</h3><br><h4 style="color:red"></h4></div>
          <div class="modal-footer">`;

        if (cdt === "success") {
        modalHTML += `<a class="btn btn-primary" href="/">进入系统</a>`;
      } else {
        modalHTML += `<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>`;
      }
      modalHTML += '</div></div></div></div>';
      // alert(modalHTML);
      // 将弹窗元素添加到页面中
      document.body.insertAdjacentHTML('beforeend', modalHTML);

      // 初始化模态窗口
        const modalElement = document.getElementById('exampleModal');
        const modalInstance = new bootstrap.Modal(modalElement, {
            backdrop: 'static' // 设置背景为静态
        });

        // 显示弹窗
      modalInstance.show();

      // 监听弹窗关闭事件
      modalElement.addEventListener('hidden.bs.modal', function () {
        // 从页面中删除弹窗元素
        document.body.removeChild(modalElement);
      });
    }
  }
</script>